<!-- 个人发布一条数据 -->
<template>
	<view class="item">

		<!-- 上 -->
		<view class="item-head">
			<view class="head-left">
				<image class="img" :src="pageData.headImg" mode=""></image>
				<text class="name">发起人 {{pageData.name}}</text>
				<image v-if="pageData.userLevel" class="headImg-top" :src="headIcon" mode=""></image>

			</view>

			<view class="head-right">
				<text class="type">{{type}}</text>
			</view>
		</view>

		<!-- 时间 -->
		<view class="item-thirdly">
			<view class="time">
				<uni-icons custom-prefix="iconfont2" type="icon-shizhong" size="28rpx"></uni-icons>

				<text class="time-text">{{time}}</text>
			</view>

			<view class="money">
				佣金￥{{pageData.commissionAmount}}/人({{unit}})
			</view>
		</view>


		<!-- 地址 -->
		<view class="item-address">
			<view class="address" @click="openAddressMap">
				<uni-icons class="icon" type="location" size="28rpx"></uni-icons>

				<text class="address-text">{{pageData.address}}</text>
			</view>

			<!-- 距离 -->
			<view class="distance">
				{{pageData.distance | distance}}
			</view>
		</view>



		<!-- 备注 -->
		<view class="item-remark" v-if="pageData.remark !== ''">
			{{pageData.remark | remark}}
		</view>

		<!-- 下 -->
		<view class="item-botton">

			<view class="botton-left">
				<view class="number">
					已接单{{pageData.applyNum}}/{{pageData.quota}}:
				</view>

				<view class="">
					<u-avatar-group :urls="urls" :maxCount="10" size="50" gap="0"></u-avatar-group>
				</view>
			</view>

			<view :class="{
				'botton-right':true,
				'botton-right2': false
			}">
				<!-- 联系电话-已邀约才显示 -->
				<view class="phone" @click="openPhone" v-if="artistApplicantStatus === 1">
					<text class="phone-text">联系客户</text>
					<uni-icons type="phone-filled" size="30rpx" color="#fff"></uni-icons>
				</view>

				<view class="buttom" 
					:style="{color: (artistApplicantStatus === null && pageData.status === 1) ? '#fff' : '#999',background: statusColor}"
					@click="enterDetail">
					{{status}}
				</view>
			</view>

		</view>


		<!-- 书签 -->
		<view class="bookmark">
			<image class="image" :src="bookmarkStatus" mode=""></image>
			<text class="text"
				:style="{color: (pageData.status === 0 || pageData.status=== 1) ? '#fff' : '#999'}">{{status2}}</text>
		</view>


		<!-- 弹出层 -->
		<u-modal :show="show" :title="title" :showCancelButton="true" :closeOnClickOverlay="true" @close="popClose">
			<view class="slot-content" @click="enterTips">
				{{content}}
			</view>
			<view class="slot-button" slot="confirmButton">
				<view class="button-left" @click="popClose">取消</view>
				<view class="button-right" @click="popSubmit">{{confirmText}}</view>
			</view>
		</u-modal>

	</view>
</template>

<script>
	// vuex引入
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'

	// api请求
	import {
		activityApplicantApi, // 报名
	} from '@/api/activity.js'

	export default {
		props: {
			data: {
				type: Object,
				default: () => {}
			},

			tabsList: {
				type: Array,
				default: () => []
			},

			// fatherInit: {
			// 	type: Function,
			// 	default: () => {}
			// },

			// /**
			//  * 设置tabBar显隐
			//  */
			// setTabBarShow: {
			// 	type: Function,
			// 	default: () => {}
			// },

		},

		data() {
			return {
				pageData: {},

				tabsListData: [],


				show: false,
				title: '立即报名',
				confirmText: '已阅读确认《接单须知》',
				content: '请详细阅读活动内容及接单需知再确认报名',

				urls: [], // 头像组


				artistApplicantStatus: null, // 状态
			};
		},
		computed: {
			...mapGetters(['userInfo']),

			isLogin() {
				let str = false
				if (this.userInfo?.loginToken) {
					str = true
				}

				return str
			},

			/**
			 * 开始时间
			 */
			time() {
				return  this.pageData.startTime.slice(0, this.pageData.startTime.length - 3) + '~' + this.pageData.duration + this.unit
			},


			/**
			 * 书签文字
			 */
			status2() {
				let str = ''

				switch (this.pageData.status) {
					case 0: {
						str = '待支付'
					}
					break;
					case 1: {
						str = '进行中'
					}
					break;
					case 2: {
						str = '已完成'
					}
					break;
					case 3: {
						str = '取消'
					}
					break;
				}

				return str;


			},



			/**
			 * 会员icon
			 */
			headIcon() {
				let str = ''

				switch (this.pageData.userLevel) {
					// 月卡银卡
					case 1: {
						str = 'https://img.tukuppt.com/ad_preview/00/49/36/lKjNHg6gSP.jpg!/fw/260'
					}
					break;

					// 季卡金卡
					case 2: {
						str =
							'https://ts1.cn.mm.bing.net/th/id/R-C.1d65f94f04ef6eb260ad699bf57c6e93?rik=lEylT3%2fVpV1mQw&riu=http%3a%2f%2fimg95.699pic.com%2felement%2f40129%2f0870.png_860.png&ehk=o47S34y3Mo6eZMGYu7mx7s3tqBf9EHAWE4%2fCVYrzQI8%3d&risl=&pid=ImgRaw&r=0'
					}
					break;

					// 年卡钻石卡
					case 3: {
						str = 'https://img.51miz.com/Element/00/94/55/22/918df10a_E945522_c702400f.png'
					}
					break;
				}

				return str;
			},

			/**
			 * 书签颜色
			 */
			bookmarkStatus() {
				let str = ''

				if (this.pageData.status === 1) {
					str = '/static/images/bookmark1.png'
				} else if (this.pageData.status === 0) {
					str = '/static/images/bookmark3.png'
				} else {
					str = '/static/images/bookmark2.png'
				}
				return str;
			},

			/**
			 * 艺人状态颜色
			 */
			statusColor() {
				let str = ''

				switch (this.artistApplicantStatus) {

					case 0: { // 已报名
						str = '#ccc'
					}
					break;
					case 1: { // 已邀约
						str = '#ccc'
					}
					break;
					case 2: { // 已完成
						str = '#ccc'
					}
					break;
					case 3: { // 已取消
						str = '#ccc'
					}
					break;
					case 4: { // 艺人已撤销
						str = '#ccc'
					}
					break;
					default : {
						if (this.artistApplicantStatus === null && this.pageData.status === 1) {
							str = '#EC606F'
						}else{
							str = '#ccc'
						}
					}
				}
				return str;
			},
			/**
			 * 单位计算
			 */
			unit() {
				let str = ''
				this.tabsListData.map(res => {
					if (res.id === this.pageData.type) {
						str = this.pageData.duration + res.unit
					}
				})
				return str;
			},
			
			
			/**
			 * 活动所属类型
			 */
			type() {
				let str = ''
				this.tabsListData.map(res => {
					if (res.id === this.pageData.type) {
						str = res.name
					}
				})
			
				return str
			},
			
			/**
			 * 艺人报名状态
			 */
			status() {
				let str = ''
				switch (this.artistApplicantStatus) {
					case 0: {
						str = '已报名'
					}
					break;
			
					case 1: {
						str = '已邀约'
					}
					break;
			
					case 2: {
						str = '已完成'
					}
					break;
			
					case 3: {
						str = '已取消'
					}
					break;
			
					case 4: {
						str = '已撤销'
					}
					break;
			
					default: {
						if (this.pageData.status === 1) {
							str = '立即报名'
						} else {
							str = '已结束'
						}
			
					}
					break;
				}
				return str;
			},
			
		},
		created() {
			// this.pageData = this.data
		},
		watch: {
			data: {
				handler() {
					if (Object.keys(this.data).length > 0) {

						this.pageData = this.data // 数据
						
						this.artistApplicantStatus = this.data.artistApplicantStatus // 艺人报名状态
						this.urls = this.pageData.applyChild.map(res => (res.coverUrl))

					}
				},
				deep: true,
				immediate: true
			},

			tabsList: {
				handler() {
					let arr = []

					this.tabsList.map(res => {
						res.cateList.map(res2 => {
							arr.push({
								name: res2.title,
								unit: res2.unit,
								id: res2.id
							})
						})
					})

					this.tabsListData = [...arr]

				},
				deep: true,
				immediate: true
			}
		},
		filters: {






			/**
			 * 备注
			 */
			remark(val) {
				let str = ''
				if (val.length > 50) {
					str = val.slice(0, 50)
				} else {
					str = val
				}


				return str;
			},








			/**
			 * 距离显示
			 */
			distance(val) {
				let str = ''
				if (val === null || val === undefined || val === '' || val === 0) {
					str = ''
				} else {
					str = val + 'km'
				}
				return str;
			}
		},
		methods: {
			...mapMutations('home', ['setEventDetails']),

			/**
			 * 进入活动详情
			 */
			enterDetail(val) {

				switch (this.pageData.artistApplicantStatus) {

					// null是未报名
					case null: {
						if (this.pageData.status === 1) {
							// 打开弹窗
							this.show = true
						}
					}
					break;

					// 0是已报名
					case 0: {

					}
					break;

					// 1是已邀约
					case 1: {

					}
					break;

					// 2是已完成
					case 2: {

					}
					break;

					// 3是已取消
					case 3: {

					}
					break;

					// 4是艺人已撤销
					case 4: {

					}
					break;

				}

			},

			/**
			 * 弹窗确定
			 */
			popSubmit() {
				console.log('点击弹窗确认');
				if (!this.isLogin) {
					uni.switchTab({
						url: '/pages/myTab/index'
					})
					return
				}
				// 报名
				this.activityApplicant(this.pageData.id)
				this.popClose()
			},

			/**
			 * 关闭弹窗
			 */
			popClose(val) {
				this.show = false
			},

			/**
			 * 点击报名
			 */
			async activityApplicant(params) {
				const res = await activityApplicantApi(params)
				if (res.code !== 200) {
					this.$public.showText(res.msg || '报名失败')
					return
				}
				this.urls.push(res.data)
				this.pageData.applyNum++

				// 更改状态
				this.$public.showText('报名成功')
				this.artistApplicantStatus = 0
			},

			/**
			 * 拨打电话
			 */
			async openPhone() {
				let str = await this.$public.phoneCall(this.pageData.phone)
			},

			/**
			 * 打开地图
			 */
			openAddressMap() {

				// 地图所需的数据
				let obj = {
					latitude: this.pageData.data.latitude, //纬度
					longitude: this.pageData.data.longitude, //经度
					// address: this.pageData.address, // 详细说明
				}
				if (this.pageData.address.indexOf("·") === -1) {
					obj['address'] = this.pageData.address
				} else {
					let str = this.pageData.address.split("·")
					obj['name'] = str[0]
					obj['address'] = str[1]
				}
				this.$public.openAddressMap(obj)
			},

			/**
			 * 前往接单须知
			 */
			enterTips() {
				uni.navigateTo({
					url: '/pages/cityParty/cityPartyTips'
				})
			},




		}
	}
</script>

<style lang="less" scoped>
	.item {
		#box(-, -, 24rpx, #fff);
		#padding(24rpx);
		position: relative;

		.item-head {
			#flex(-, space-between, center);
			margin-bottom: 24rpx;

			.head-left {
				#flex(-, -, center);
				position: relative;

				.img {
					#box(68rpx, 68rpx, 50%);
					border: 2rpx solid rgba(#000, .1);
				}

				.name {
					#font(28rpx, #3c4766, 400);
					margin-left: 14rpx;
				}

				.headImg-top {
					#box(40rpx);
					position: absolute;
					top: -20rpx;
					left: 34rpx;
					margin-left: -20rpx;
				}
			}


			.head-right {
				margin-right: 48rpx;

				.type {
					#font(24rpx, #e45d4e, 400);
					#padding(8rpx 12rpx);
					background-color: #FFF7EA;
					margin-right: 24rpx;
				}
			}


		}




		.item-thirdly {
			#flex(-, space-between, center);
			margin-bottom: 12rpx;

			.time {
				#flex(-, -, center);

				.time-text {
					#font(24rpx, #3c4766, 400);
					line-height: 36rpx;
					margin-left: 12rpx;
				}
			}




			.money {
				#font(24rpx, #EC606F, 400);
			}



		}

		.item-address {
			#flex(-, space-between, flex-end);

			.address {
				width: 90%;

				.icon {
					margin-right: 6rpx;
				}

				.address-text {
					#font(24rpx, #3c4766, 400);
					line-height: 36rpx;
				}
			}


			.distance {
				#font(24rpx, #3c4766, 400);
				line-height: 36rpx;
			}
		}

		.item-remark {
			background-color: #eee;
			#font(24rpx, #666);
			#padding(24rpx);
			border-radius: 12rpx;
			margin-top: 24rpx;
		}

		.item-botton {
			margin-top: 32rpx;
			#flex(-, space-between, center);

			.botton-left {
				#flex(-, flex-start, center);

				.number {
					#font(24rpx, #3c4766);
					margin-right: 12rpx;
				}

			}

			.botton-right {
				#flex(-, -, center);

				.phone {
					#flex(-, center, center);
					#font(24rpx, #fff, 400);
					#box(-, 56rpx, 100rpx, #8cde9b);
					#padding(0 24rpx);

					.phone-text {
						margin-right: 12rpx;
					}
				}

				.buttom {
					margin-left: 12rpx;
					#flex(-, center, center);
					#font(24rpx, #fff, 400);
					#box(148rpx, 56rpx, 100rpx, linear-gradient(180deg, #E27C8A -3%, #EC606F 100%));
				}

			}

			.botton-right2 {
				background-color: #eee;
				color: #999;
			}

		}

		// 书签
		.bookmark {
			position: absolute;
			right: 20rpx;
			top: 0;
			line-height: 28rpx;


			.image {
				#box(60rpx, 64rpx);
			}

			.text {
				#font(16rpx, #333);
				#position(absolute, 50%, 50%);
				margin-top: -10rpx;
				margin-left: -24rpx;
			}

		}


	}


	.slot-content {
		#font(28rpx, #333, 400);
		text-decoration: underline;

		&:active {
			color: rgba(#2771e4, .4);
		}
	}

	.slot-button {
		border-top: 2rpx solid rgba(#000, .1);
		#padding(0 24rpx);
		#flex(-, space-between, center);
		#font(28rpx, #333);
		height: 88rpx;

		.button-left {
			#flex(-, center, center);
			#box(40%, 100%);
			#padding(0 24rpx 0 0);
			border-right: 2rpx solid rgba(#000, .1);
		}

		.button-right {
			color: #2771e4;
			line-height: 42rpx;
			#box(-, 100%);
			#flex(-, center, center);
			#padding(0 0 0 24rpx);
		}
	}

	/deep/ .u-modal__button-group--confirm-button {
		padding: 0;
	}
</style>